<!-- 各风险等级公司数量分布 -->
<template>
  <MyChart :loading="loading" :options="options" :dataEmptyFlag="dataEmptyFlag" @echartsClick="echartsClick"></MyChart>
</template>
<script setup name="DistributionPie">
import { ref, watch, onMounted } from 'vue';
import MyChart from "@/components/MyCharts/index.vue";
const loading = ref(false);
const dataEmptyFlag = ref(false);
const emit = defineEmits(["echartsClick"]);
const props = defineProps({
  height: {
    type: String,
    default: "100%",
  },
  width: {
    type: String,
    default: "100%",
  },
  dataList: {
    type: Array,
    default: function () {
      // 测试数据
      return [
        // { value: "12", name: "高风险" },
        // { value: "34", name: "中风险" },
        // { value: "56", name: "低风险" },
        // { value: "78", name: "安全" },
        // { value: "99", name: "非常安全" },
        // { value: "130", name: "未上报" },
      ];
    },
  },
  showLabelLine: {
    type: Boolean,
    default: false,
  },
  showLabel: {
    type: Boolean,
    default: false,
  },
  title: {
    type: [String,Number],
    default: "833", //// 测试数据
  },
  colorList: {
    type: Array,
    default: function () {
      // 测试数据
      return [
        '#DD1313',
        '#FF7C6A',
        '#FFD12D',
        '#74D35C',
        '#05A357',
        '#D1D1D1',
      ];
    },
  },
});
watch(
  () => props.dataList,
  (list) => {
    loadECharts();
  }
);

const options = ref();

const baseOption = {
  backgroundColor: "#00000000",
  tooltip: {
    trigger: "item",
    borderColor: "rgba(255,255,255,.3)",
    backgroundColor: "rgba(13,5,30,.6)",
    textStyle: {
      color: "white", //设置文字颜色
    },
    borderWidth: 1,
    padding: 5,
    formatter: "{b}: {c} ({d}%)" //'{b}:{c}'
  },
  // color: props.colorList,
  // 内部文字
  title: {
    text: props.title,
    left: "32%",
    top: "middle",
    itemGap: 8,
    textStyle: {
      color: "#fff",
      fontSize: 20,
      fontWeight: 400,
    },
  },
  legend: [
    // {
    //   right: "10%",
    //   align: "left",
    //   top: "middle",
    //   orient: "vertical",
    //   itemWidth: 16,
    //   itemHeight: 16,
    //   icon: "roundRect",
    //   itemGap: 15,
    //   textStyle: {
    //     color: "#fff",
    //     fontSize: 12,
    //     padding: [0, 0, 0, 10],
    //   },
    //   formatter: (name) => {
    //     // console.log("name:", name);
    //     let value = 0; //当前值
    //     for (let i = 0, j = props.dataList.length; i < j; i++) {
    //       let curData = props.dataList[i];
    //       if (curData.name == name) {
    //         value = curData.value ? curData.value : 0;
    //       }
    //     }
    //     return `${name}    ${value}`;
    //   },
    // },
    {
      itemHeight: 14,
      itemWidth: 14,
      icon: 'rect',
      orient: 'vertical',
      top: 'center',
      right: '5%',
      textStyle: {
        align: 'left',
        color: '#',
        verticalAlign: 'middle',
        rich: {
          name: {
            width: 80,
            fontSize: 16
          },
          value: {
            width: 20,
            align: 'right',
            fontFamily: 'Medium',
            fontSize: 16
          },
          rate: {
            width: 10,
            align: 'right',
            fontSize: 16
          }
        }
      },
      // data: datas,
      formatter: (name) => {
        // console.log("name:", name);
        let value = 0; //当前值
        for (let i = 0, j = props.dataList.length; i < j; i++) {
          let curData = props.dataList[i];
          if (curData.name == name) {
            value = curData.value ? curData.value : 0;
          }
        }
        return `${name}    ${value}`;
      },
    }
  ],
  grid: {
    containLabel: true,
  },
  series: [],
};

const loadECharts = () => {
  if (!props.dataList || props.dataList.length == 0) {
    dataEmptyFlag.value = false;
  } else {
    dataEmptyFlag.value = false;
  }

  baseOption.series = [
    {
      type: "pie",
      radius: ['35%', '100%'],
      center: ['35%', '50%'],
      roseType: 'radius',
      // color: ["#DD1313", "#FF7C6A", "#FFD12D", "#74D35C", "#05A357", "#D1D1D1"],
      label: {
        // position: "outside",
        // show: props.showLabel,
        // color: "#fff",
        // textBorderColor: "inherit",
        // textBorderWidth: 1,
        // fontSize: 16,
        show: false,
        position: 'center',
        formatter: '{c_style|{c}%%}\n{b_style|{b}}',
        rich: {
          b_style: {
            fontSize: 16,
            fontWeight: 400,
            color: '#fff'
          },
          c_style: {
            padding: [0, 0, 10, 0],
            fontSize: 28,
            fontWeight: 'bold',
            color: '#fff'
          }
        }
      },
      labelLine: {
        show: props.showLabelLine,
        length2: 10,
        length: 10,
      },
      data: props.dataList,
    },
  ];
  options.value = { ...baseOption };
};
function echartsClick(params) {
  let item = props.dataList[params.dataIndex];

  emit("echartsClick", item);
}

onMounted(loadECharts);
</script>
